<template>
  <div class="command-box">
    <Form :model="commandForm" ref="commandForm" :label-width="150" label-position="left">
      <FormItem label="运行命令" prop="command">
        <Input v-model.trim="commandForm.command" placeholder="例如：/usr/sbin/httpd -f httpd.conf" @on-blur="updateBlur"></Input>
      </FormItem>
      <FormItem label="运行命令参数" prop="args">
        <Input v-model.trim="commandForm.args" placeholder="例如：运行命令参数" @on-blur="updateBlur"></Input>
      </FormItem>
    </Form>
  </div>
</template>
<script type="text/javascript">
export default {
  name: 'Command',
  data() {
    // const validateLength = (rule, value, callback) => {
    //   if (value && value.length > 128) {
    //     callback(new Error('最大长度不能大于128位'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      // commandRules: {
      //   command: [{required: false, trigger: 'blur', validator: validateLength}],
      //   args: [{required: false, trigger: 'blur', validator: validateLength}],
      //   hostName: [{required: false, trigger: 'blur', validator: validateLength}]
      // }
    }
  },
  props: {
    commandForm: {
      type: Object,
      default: {
        command: '',
        args: '',
        hostName: ''
      }
    }
  },
  methods: {
    updateBlur() {
      this.$refs['commandForm'].validate((valid) => {
        if (valid) {
          this.$emit('update:commandForm', {
            command: this.commandForm.command,
            args: this.commandForm.args,
            hostName: this.commandForm.hostName
          })
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.command-box {
  div.ivu-form-item {
    margin-bottom: 16px;
  }
  .iconfont:hover {
    color: #fff;
  }
  .environment-item {
    padding-right: 10px;
  }
  .icon-jian {
    font-size: 20px;
    color: #e45049;
    cursor: pointer;
    &:hover {
      color: #e45049;
    }
  }
}
.environment-row /deep/ {
  .ivu-col {
    margin-right: 10px;
  }
}
.command-box /deep/ .ivu-form-item-error-tip {
  padding-top: 1px;
}
</style>
